<template>
  <div class="PerSonal">
    <InputBox :inputProps="contactNameInput" />
    <SelectPick :selectProps="relationPick" />
    <InputBox :inputProps="contactPhoneInput" />
    <SelectPick :selectProps="contactAddressPick" />
    <InputBox :inputProps="contactAddressStreetInput" />
  </div>
</template>

<script lang="ts" setup>
import { IgetDetailByNoticeSerialNo } from '@/typings/getDetailByNoticeSerialNo';
import { commonTypes } from '@/typings/commonTypes';
import SelectPick from './SelectPick.vue';
import InputBox from './InputBox.vue';

import { Cell, CellGroup, Dialog, Step, Steps, Form, Field } from 'vant';
import type { FormInstance } from 'vant';

import { useStore } from 'vuex';
const store = useStore();
//因为这里用了script的setup方式就用不到 defineComponent 这个定义组件的api了
import {
  useSlots,
  useAttrs,
  defineProps,
  onMounted,
  watchEffect,
  ref,
  reactive,
  PropType,
  watch,
  computed,
} from 'vue';

const contactNameInput: commonTypes.IselectProps = reactive({
  name: 'contactName',
  label: '联系人姓名',
  required: true,
  maxlength: 5,
  keyOne: 'patAdmiNote',
  keyTwo: 'contactName',
});

const relationPick: commonTypes.IselectProps = reactive({
  name: 'relation',
  label: '关系',
  required: true,
  columns: computed(() => store.getters.getDictionaries).value.relation,
  keyOne: 'patAdmiNote',
  keyTwo: 'relation',
});

const contactPhoneInput: commonTypes.IselectProps = reactive({
  name: 'contactPhone',
  label: '联系人电话',
  required: true,
  maxlength: 11,
  errorMessage: '请输入正确的手机号',
  validator: (value, rule) => {
    if (!/^1[34578]\d{9}$/.test(value)) {
      return false;
    } else {
      return true;
    }
  },
  keyOne: 'patAdmiNote',
  keyTwo: 'contactPhone',
});

const contactAddressPick: commonTypes.IselectProps = reactive({
  // 做成省市区
  /*  contactAddress	string	联系人地址
contactAddressProv	string	联系人地址省
contactAddressCity	string	联系人地址市
contactAddressCounty	string	联系人地址县  没有code  直接赋值*/
  name: 'contactAddress',
  label: '联系人住址',
  type: 'provinceCityDistrict', //省市区
  required: true,
  columns: computed(() => store.getters.getProvCityCountyColumns).value,
  keyOne: 'patAdmiNote',
  keyTwo: 'contactAddress',
  ProvCityCountyArray: ['contactAddressProv', 'contactAddressCity', 'contactAddressCounty'], //需要赋值的字段 省市区
});

const contactAddressStreetInput: commonTypes.IselectProps = reactive({
  name: 'contactAddressStreet',
  label: '联系人详细地址',
  required: true,
  keyOne: 'patAdmiNote',
  keyTwo: 'contactAddressStreet',
});

//获取父组件传的值
/*const props = defineProps({
  formPam: {
    // type:  Array as () => Array<string>, //(string也可以是其他你自定义的接口)
    type: Object as PropType<IgetDetailByNoticeSerialNo.IRootObject>,
    required: true,
    default: () => {
      return {};
    },
  },
});*/

//初始化赋值
const init = () => {
  const form = computed((): IgetDetailByNoticeSerialNo.BusObj => store.getters.form);
  //console.log('init', admissionNumInput.value);
};

onMounted(() => {
  //console.log('onMounted:', PerSonal.docAdmiNote?.admissionNum);
});

// 1.监听对象 赋值
watch(
  () => store.state.form, //props.formPam,
  () => {
    init();
  },
  {
    deep: true, // 深度监听的参数
    immediate: true, //绑定值就开始执行监听
  },
);

//watchEffect 会最先执行
watchEffect(() => {
  //console.log('watchEffect:', 3333);
});
</script>

<style scoped lang="scss">
.PerSonal {
}
</style>
